<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="xgxx.u_name"
          label="姓名"
          :rules="[
            { pattern: nameRules, required: true, message: '请填写正确的姓名' },
          ]"
        />
        <van-field
          v-model="xgxx.u_phone"
          label="电话"
          :rules="[{ pattern, required: true, message: '请填写正确的电话' }]"
        />
        <van-field
          v-model="xgxx.u_card"
          label="身份证号码"
          :rules="[
            { validator, required: true, message: '请填写正确的身份证号码' },
          ]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          @click="submit"
          native-type="submit"
        >
          确认修改
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import httpApi from "@/http";
import store from "@/store";
import Xinxi from "../../types/Xinxi";
import router from "@/router";
import { showFailToast, showSuccessToast } from "vant";
// 电话号码验证
let pattern = /^1[3-9]\d{9}$/;
// 姓名验证
let nameRules = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
// 身份证验证
const validator = (val: any) =>
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
    val
  );

let u_id = store.state.u_id;
const xgxx = ref<Xinxi>({});

const onSubmit = (values: any) => {
  console.log("submit", values);
};
onMounted(() => {
  httpApi.ChaxunApi.xinxi({ u_id }).then((res) => {
    console.log("用户信息为", res);
    xgxx.value = res.data.data[0];
  });
});

const submit = function () {
  let params = {
    u_name: xgxx.value.u_name,
    u_phone: xgxx.value.u_phone,
    u_card: xgxx.value.u_card,
    u_id,
  };
  httpApi.ChaxunApi.xiugai(params).then((res) => {
    console.log("修改的信息为", res);
    if (res.data.code == 200) {
      showSuccessToast("修改成功");
      router.push(`/home/index`);
    } else {
      showFailToast("修改失败");
    }
  });
};
</script>

<style scoped>

</style>
